<template>
  <div>
    <!--    个人信息结束-->
    <div>
      <!--  头像  -->
      <div style="display: inline-block" @click="gotoPersonalData">
        <img :src="this.url + '/'+this.user.avatar" STYLE="width: 100px;height: 100px;" alt="头像">
      </div>
      <div style="display: inline-block;margin-left: 10px">
        <h4>{{ this.user.nick }}</h4>
        <p v-if="this.user.phone">
          已绑定手机
          <el-link type="primary" :underline="false" style="font-size: 1rem" @click="gotoPhone">修改绑定手机</el-link>
        </p>
        <p v-else>
          未绑定手机
          <el-link type="primary" :underline="false" style="font-size: 1rem" @click="gotoPhone">绑定手机</el-link>
        </p>
        <p v-if="this.user.email">
          已绑定邮箱
          <el-link type="primary" :underline="false" style="font-size: 1rem" @click="gotoEmail">修改绑定邮箱</el-link>
        </p>
        <p v-else>
          未绑定邮箱
          <el-link type="primary" :underline="false" style="font-size: 1rem" @click="gotoEmail">绑定邮箱</el-link>
        </p>
        <p>上次登录时间：{{ data.lastLogin }} 如果不是您登陆的请联系客服</p>
      </div>
    </div>
    <!--    个人信息开始-->
    <!--    交易提醒开始-->
    <div class="d_content">
      <h3>交易提醒</h3>
      <el-divider></el-divider>
      <p>订单状态:
        <span style="margin-left: 15px">
          <el-link type="primary" @click="gotoOrder(1)"> 待确认({{ orderStates.TOBE_CONFIRM }}) </el-link>
        </span>
        <span style="margin-left: 15px">
        <el-link type="primary" @click="gotoOrder(2)"> 待付款({{ orderStates.TOBE_PAY }})</el-link>
        </span>
        <span style="margin-left: 15px">
          <el-link type="primary" @click="gotoOrder(3)"> 待发货({{ orderStates.TOBE_SHIPPED }})</el-link>
        </span>
        <span style="margin-left: 15px">
          <el-link type="primary" @click="gotoOrder(4)"> 待确认收货({{ orderStates.CONFIRM_RECEIPT }})</el-link>
        </span>
        <span style="margin-left: 15px">
          <el-link type="primary" @click="gotoOrder(5)"> 退货/退款({{ orderStates.RETURN_GOODS }})</el-link>
        </span>
        <span style="margin-left: 15px">
          <el-link type="primary" @click="gotoOrder(6)"> 待评价({{ orderStates.TOBE_EVALUATED }})</el-link>
        </span>


      </p>

    </div>
    <!--    交易提醒结束-->
    <!--    资金账户开始-->
    <div class="d_content">
      <h3>资金账户</h3>
      <el-divider></el-divider>
      <p>我的资金账号：{{ data.account }}</p>
      <p>余额 {{ data.balance }} 元</p>
      <p>
        <el-button @click="" plain size="small">充值</el-button>
        <el-button plain size="small">转账</el-button>
        <el-button plain size="small">提现</el-button>
      </p>
    </div>
    <!--    资金账户结束-->

  </div>

</template>

<script>
//引入 VueX 中的 方法集合和属性集合
import {mapMutations, mapState} from 'vuex'
import axios from "axios";
import router from "@/router";

export default {
  name: "InfoView",
  data() {
    return {
      orderStates: {
        TOBE_CONFIRM: 0,
        TOBE_PAY: 0,
        TOBE_SHIPPED: 0,
        CONFIRM_RECEIPT: 0,
        RETURN_GOODS: 0,
        TOBE_EVALUATED: 0,
      },
      data: {
        account: '',
        balance: 0.00,
        lastLogin: ''
      }
    }
  },
  mounted() {
    //登录后请求User数据
    axios.get(  "/user/mine/" + this.userId).then(r => {
      console.log("数据库的User数据")
      console.log(r.data.data)
      let user = {
        nick: '', phone: '', email: '', avatar: ''
      }
      if (typeof (r.data.data.email)!='undefined')
        user.email = r.data.data.email
      if (typeof (r.data.data.phone)!='undefined')
        user.phone = r.data.data.phone
      user.nick = r.data.data.nick
      user.avatar =  r.data.data.avatar
      this.setUser(user)
      this.data.account = r.data.data.account
      this.data.balance = r.data.data.balance
      this.data.lastLogin = r.data.data.lastLogin
      console.log("VueX中的user")
      console.log(this.user)
    })
    //登录后请求 统计订单状态
    axios.get(this.url + "/order/countOrderStates/" + this.userId).then(r => {
      this.orderStates = r.data.data
    })
  },
  methods: {
    //解构 VueX 中的 mutation 方法，这样就可以直接用 vuex 中的方法了
    ...mapMutations(['setUser', 'setOrderState', 'setUserId']),
    gotoPhone() {
      router.push("/mine/phone")
    },
    gotoEmail() {
      router.push("/mine/email")
    },
    gotoPersonalData(){
      router.push("/mine/personalData")
    },
    gotoOrder(orderState) {
      this.setOrderState(orderState)
      router.push("/mine/order")
    }
  },
  //vue 中自带监听属性变化的方法组，内部方法可以随监听的属性值变动而变动
  //方法自身可以通过方法名使用 例如 {{userId}}
  computed: {
    //解构 VueX 中的 state 属性，传入数组
    //可以直接通过 userId 进行调用 vueX 中的共享字段
    ...mapState(['user', 'url', 'userId']),
  },
}
</script>

<style scoped>
.d_content {
  padding: 10px;
  margin-top: 15px;
  border: #d2d3d4 solid 1px;
}

p {
  line-height: 24px;
  margin-top: 5px;
}

.el-divider--horizontal {
  margin: 12px 0;
}

el-link {
  font-size: 1rem;
}
</style>